<template>
  <div class="fly-screen-container">
    <div class="fly-screen">
      <div class="fly-title">
        飞控大屏
      </div>
      <div class="fly-body" v-if="isShow">
        <el-row :gutter="12">
          <el-col :span="6">
            <ScreenBox :custom-style="{ height: '25%' }">
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '22%' }">
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '31%' }">
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '22%' }">
            </ScreenBox>
          </el-col>
          <el-col :span="12">
            <ScreenBox :show-title="false" :custom-style="{ height: '100%' }" :svg-size="2" :show-icon="false">
              <div class="screen-map">
                <div style="height: 100%;width: 100%" id="flyMonitorMap"></div>
              </div>
            </ScreenBox>
          </el-col>
          <el-col :span="6">
            <ScreenBox :custom-style="{ height: '33%' }">
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '33%' }">
            </ScreenBox>
            <ScreenBox :custom-style="{ height: '34%' }">
            </ScreenBox>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import ScreenBox from "./screenBox.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
import {onMounted, onUnmounted, ref} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const isShow = ref(true)
/**
 * 地图
 */
let map = null;

onMounted(() => {
  AMapLoader.load({
    key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
      .then((AMap) => {
        map = new AMap.Map("flyMonitorMap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          layers: [new AMap.TileLayer.Satellite()],
          zoom: 14, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
});

onUnmounted(() => {
  map?.destroy();
  isShow.value = false
});
router.beforeEach((to, from, next) => {
  if (from.path === "/monitor/fly") {
    isShow.value = false
    setTimeout(() => {
      next()
    },0)
  } else {
    next()
  }
})
</script>
<style lang="scss">
.fly-screen-container {
  overflow: auto;
  flex-grow: 1;
}
.fly-screen {
  height: 100%;
  background: #04162d;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 1500px;

  .fly-title {
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 27px;
    color: #fff;
    background-image: url('~@/assets/monitor/title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    letter-spacing: 6px;
  }
  .fly-body {
    flex-grow: 1;
    width: 99%;
    margin: 0 auto;
    .screen-map {
      width: 99%;
      height: 66%;
      margin:auto;
      padding-top: 6px;
      position: relative;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      overflow: hidden;
    }
    .el-row {
      height: 100%;
      width: 100%;
      border-radius: 6px;
      .el-col {
        padding: 5px;
      }
    }
  }
}
</style>
